<!--<template>
<div class="wrapper">
  <div class="inner">
    <div class="head">
      <ul class="room-list">
        <li class="room-item">考场名称：<span>{{examRoomInfo.room_name}}</span></li>
        <li class="room-item">科目信息：<span>{{examRoomInfo.subject}}</span></li>
        <li class="room-item">考试时间：<span>{{timeParse(examRoomInfo.season_begin_time)}}-{{timeParse(examRoomInfo.season_end_time)}}</span></li>
        <li class="room-item exam-teacher">监考老师：<span v-for="teacher of examRoomInfo.invigilator_list">{{teacher.name}}</span></li>
      </ul>
      <div class="head-right">
        <div class="current-time">
          <div class="time">{{hour}}:{{minute}}</div>
          <Weather :cityName="bus.cityName"></Weather>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="s-table" v-if="type==='tb'">
        <table class="s-tb" cellpadding="0" cellspacing="0">
          <thead>
            <tr>
              <th class="s-th">座位号</th>
              <th class="s-th">姓名</th>
              <th class="s-th">性别</th>
              <th class="s-th">学号</th>
              <th class="s-th">考号</th>
              <th class="s-th">准考证号</th>
              <th class="s-th">学籍号</th>
              <th class="s-th">身份证号</th>
              <th class="s-th">所属学校</th>
            </tr>
          </thead>
          <tbody>
          <tr v-for="student of examRoomData.student_info_list" :key="student.student_sno">
            <td class="s-td">{{student.student_seat_number}}</td>
            <td class="s-td">{{student.student_name}}</td>
            <td class="s-td">{{student.student_sex}}</td>
            <td class="s-td">{{student.student_sno}}</td>
            <td class="s-td">{{student.student_examno}}</td>
            <td class="s-td">{{student.student_exam_number}}</td>
            <td class="s-td">{{student.student_school_number}}</td>
            <td v-if="student.student_id_number" class="s-td">{{student.student_id_number}}</td>
            <td class="s-td">{{student.student_school_name}}</td>
          </tr>
          </tbody>
        </table>
      </div>
      <ul class="student-list" v-else-if="type==='ava'">
        <li class="s-item" v-for="student of examRoomData.student_info_list" :key="student.student_sno">
          <div class="s-img-c">
            <div class="s-img-box"><img class="s-img" :src="student.student_avatar" alt=""></div>
          </div>
          <p class="name">姓名：<span>{{student.student_name}}</span></p>
          <p class="card">准考证号：<span>{{student.student_exam_number}}</span></p>
          <p class="student-id">学号：<span>{{student.student_sno}}</span></p>
        </li>
      </ul>
    </div>
  </div>
</div>
</template>-->

<script>
import Weather from '@/modules/weather2/Weather1'
import TimeUpdate from '@/modules/corejs/time/time-update.js'
// import getClassData from '@/modules/ajax-api/get-class-data.js'
import ajaxApi from '@/modules/ajax-api/index.js'
let timeUpdate = new TimeUpdate()
function numfill (number) {
  if (number < 10) {
    return '0' + number
  }
  return number
}
export default {
  render () {
    let {bus, examRoomData, timeParse, hour, minute, type} = this

    let examRoomInfo = examRoomData.exam_room_info

    let teachers = []
    examRoomInfo.invigilator_list.forEach(teacher => {
      teachers.push(<span>{teacher.name}</span>)
    })

    let listData = examRoomData.student_info_list
    let listDataFirst = listData[0] || {}
    let hasSeatNumber = listDataFirst.student_seat_number
    let hasName = listDataFirst.student_name
    let hasSex = listDataFirst.student_sex
    let hasSNo = listDataFirst.student_sno
    let hasExamNo = listDataFirst.student_examno
    let hasExamNumber = listDataFirst.student_exam_number
    let hasSchoolNumber = listDataFirst.student_school_number
    let hasIdNumber = listDataFirst.student_id_number
    let hasSchoolName = listDataFirst.student_school_name

    let studentInfoList
    if (type === 'tb') {
      let studentInfoListTb = []
      listData.forEach(student => {
        studentInfoListTb.push(
          <tr key={student.student_sno}>
            {hasSeatNumber && <td class="s-td">{student.student_seat_number}</td>}
            {hasName && <td class="s-td">{student.student_name}</td>}
            {hasSex && <td class="s-td">{student.student_sex}</td>}
            {hasSNo && <td class="s-td">{student.student_sno}</td>}
            {hasExamNo && <td class="s-td">{student.student_examno}</td>}
            {hasExamNumber && <td class="s-td">{student.student_exam_number}</td>}
            {hasSchoolNumber && <td class="s-td">{student.student_school_number}</td>}
            {hasIdNumber && <td class="s-td">{student.student_id_number}</td>}
            {hasSchoolName && <td class="s-td">{student.student_school_name}</td>}
          </tr>
        )
      })
      studentInfoList = (
        <div class="s-table">
          <table class="s-tb" cellpadding="0" cellspacing="0">
            <thead>
              <tr>
                {hasSeatNumber && <th class="s-th">座位号</th>}
                {hasName && <th class="s-th">姓名</th>}
                {hasSex && <th class="s-th">性别</th>}
                {hasSNo && <th class="s-th">学号</th>}
                {hasExamNo && <th class="s-th">考号</th>}
                {hasExamNumber && <th class="s-th">准考证号</th>}
                {hasSchoolNumber && <th class="s-th">学籍号</th>}
                {hasIdNumber && <th class="s-th">身份证号</th>}
                {hasSchoolName && <th class="s-th">所属学校</th>}
              </tr>
            </thead>
            <tbody>{studentInfoListTb}</tbody>
          </table>
        </div>
      )
    } else {
      let list = []
      listData.forEach(student => {
        list.push(
          <li class="s-item" key={student.student_sno}>
            <div class="s-img-c">
              <div class="s-img-box"><img class="s-img" src="student.student_avatar" alt=""/></div>
            </div>
            <p class="name">姓名：<span>{student.student_name}</span></p>
            <p class="card">准考证号：<span>{student.student_exam_number}</span></p>
            <p class="student-id">学号：<span>{student.student_sno}</span></p>
          </li>
        )
      })
      studentInfoList = (
        <ul class="student-list" v-else-if="type==='ava'">{list}</ul>
      )
    }

    return (
      <div class="wrapper">
        <div class="inner">
          <div class="head">
            <ul class="room-list">
              <li class="room-item">考场名称：<span>{examRoomInfo.room_name}</span></li>
              <li class="room-item">科目信息：<span>{examRoomInfo.subject}</span></li>
              <li class="room-item">考试时间：<span>{timeParse(examRoomInfo.season_begin_time)}-{timeParse(examRoomInfo.season_end_time)}</span></li>
              <li class="room-item exam-teacher">监考老师：{teachers}</li>
            </ul>
            <div class="head-right">
              <div class="current-time">
                <div class="time">{hour}:{minute}</div>
                <Weather cityName={bus.cityName}></Weather>
              </div>
            </div>
          </div>
          <div class="content">{studentInfoList}</div>
        </div>
      </div>
    )
  },
  props: {
    bus: Object
  },
  data () {
    return {
      type: '', // 'tb' 'ava'
      hour: '00',
      minute: '00',
      examRoomData: {
        exam_room_info: {
          invigilator_list: []
        },
        student_info_list: []
      }
    }
  },
  // computed: {
  //   examRoomInfo () {
  //     return this.examRoomData.exam_room_info
  //   }
  // },
  components: {
    Weather
  },
  created () {
    this.typeUpdate()
    timeUpdate.start(() => {
      let d = new Date()
      this.hour = numfill(d.getHours())
      this.minute = numfill(d.getMinutes())
    }, 1000 * 60)
    this.loadData()
  },
  destroyed () {
    timeUpdate.stop()
  },
  beforeRouteUpdate (to, from, next) {
    next()
    this.typeUpdate()
    this.loadData()
  },
  methods: {
    typeUpdate () {
      if (this.$route.query.type === 'ava') {
        this.type = 'ava'
      } else {
        this.type = 'tb'
      }
    },
    loadData () {
      let {equipmentCode} = this.bus
      if (!equipmentCode) return
      this.$preloaderFull.show()
      ajaxApi.getClassId().then(classId => {
        return this.$axios.get('/classcard/v1/getExamRoomInfo/' + classId).then(({data}) => {
          if (data.status === 200) {
            let examRoomData = data.result.data
            if (examRoomData) {
              this.examRoomData = examRoomData
            }
          } else {
            this.$simpleMsg(data.message)
          }
        })
      }).catch(e => { this.$simpleMsg(e) }).then(() => {
        this.$preloaderFull.close()
      })
    },
    timeParse (time) {
      return time ? time.match(/\d\d:\d\d/)[0] : ''
    }
  }
}
</script>

<style scoped>
.wrapper{
  width: 1080px;
  height: 1920px;
  margin: 0 auto;
  background:#22bbe7 url("assets/bg.png") no-repeat 0 0;
  background-size: 100% auto;
}
.inner{
  padding: 60px 54px 0;
}
.head{
  padding: 0 8px;
  text-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
}
.room-list{
  float: left;
}
.room-list .room-item{
  font-size: 48px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 25px;
}
.room-list .room-item span{
  margin-right: 43px;
}
.room-list .exam-teacher{
  font-size: 36px;
  font-weight: normal;
  text-shadow: none;
}
.head-right{
  float: right;
  margin-top: -20px;
}
.current-time .time{
  font-size: 90px;
  color: #eae839;
  font-weight: 600;
  text-align: right;
  text-shadow: 0px 8px 20px rgba(0, 0, 0, 0.23);
}
/* .current-time .date{
  font-size: 24px;
  font-weight: normal;
  color: #fff;
  margin: 45px 0 44px;
} */
.current-time .weather {
  font-size: 24px;
  text-align: right;
  text-shadow: 0px 0px 9px #464646;
  & >>> .wtdate{
    font-size: 30px;
    font-weight: normal;
    color: #fff;
    margin: 22px 0 16px;
  }
  & >>> .wweek {
    padding-left: 0;
  }

  & >>> .wtimg {
    width: 90px;
    height: 86px;
  }
  & >>> .ot {
    width: 150px;
  }
  & >>> .tp {
    padding: 20px 0 6px;
  }
}

.content{
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 54px;
  margin-top: 45px;
  clear: both;
  height: 1472px;
  overflow: auto;
}
.student-list{
  padding: 52px 0 0;
  /* margin-left: -175px; */
}
.student-list .s-item{
  /* display: inline-block; */
  /* margin-left: 170px; */
  float: left;
  width: 33.33%;
  text-align: center;
  margin-bottom: 50px;
}
.student-list .s-img-c{
  margin: 0 auto;
  width:162px;
  margin-bottom: 12px;
  box-shadow: 0 0 16px 2px #c3c3c3;
}
.student-list .s-img-box{
  padding-top: 140%;
  position: relative;
}
.student-list .s-img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('./assets/none-ava.png');
  background-size: 100% 100%;
}
.student-list .name{
  color: #000;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}
.student-list .card, .student-list .student-id{
  font-size: 12px;
  color: #686465;
  line-height: 20px;
}

.s-table{
  padding: 52px 55px;
}
.s-table .s-tb{
  width: 100%;
  border: 1px solid #abaaaa;
  text-align: center;
}
.s-table .s-th {
  font-size: 18px;
  padding: 10px 0;
  border: 1px solid #abaaaa;
}
.s-table .s-td{
  font-size: 16px;
  padding: 10px 0;
  border: 1px solid #abaaaa;
  color: #666;
}

</style>
